<template>
  <div class="wrap flex">
    <div class="item flex fw" v-for="(item, index) in data" :key="'index' + index">
      <img :src="item.icon" alt="-" />
      <span class="item-number"
        >{{ item.number }}<i>{{ item.unit }}</i></span
      >
      <span class="item-label">{{ item.label }}</span>
    </div>
  </div>
</template>

<script>
import img27 from "../../assets/img/img27.png";
import img25 from "../../assets/img/img25.png";
export default {
  name: "panel-right-one-left",
  data() {
    return {
      data: [
        {
          icon: img27,
          number: "6,514",
          label: "总场景数量",
          unit: "个"
        },
        {
          icon: img25,
          number: 16,
          label: "覆盖行业",
          unit: "个"
        }
      ]
    };
  }
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  padding: 0 2%;
}

.item img {
  width: 1.7vw;
  height: 1.7vw;
  margin-top: 0.5vw;
  margin-bottom: 0.5vw;
}

.item-number {
  display: inline-block;
  width: 100%;
  font-size: 3vh;
  line-height: 1.2vw;
  white-space: nowrap;
  text-align: center;
}

.item-number i {
  font-size: 0.45vw;
}

.item-label {
  display: inline-block;
  width: 100%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.56vh;
  text-align: center;
}
</style>
